<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="搜索歌曲、歌手、专辑"
      @input="input"
      @click-input="keepvalue"
    />
    <div>
      <h4 v-if="searchlist">搜索 : {{value}}</h4>
      <van-card
        class="van-card"
        v-for=" (item , index ) in searchlist"
        :key="index"
        @click="valueclick(index) ,aclick(index),location(index)"
      >
        <template #title>
          <div>
            <van-icon name="search" />
            {{item.name}}
          </div>
        </template>
      </van-card>
    </div>
    <div class="hotsearch">
      <h3>热歌搜索</h3>
      <van-button
        round
        type="info"
        v-for="(item,index) in hotlist"
        :key="item.id"
        to="/musiclist"
        @click="aclick(index)"
      >{{item.searchWord}}</van-button>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
        >
          <van-icon name="clock-o" />
          {{item}}
          <span @click="deletedata(index)">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getSearch, getHotsearch } from '../../api/search'
export default {
  data() {
    return {
      value: '',
      searchlist: '',
      correlalist: '',
      hotlist: '',
      id: null,
      datalist: [],
      list: [],
      searchName: '',
      aaa: '',
      thisid: []
    }
  },
  created() {
    this.getHotsearch()
    this.datalist = JSON.parse(localStorage.aaa || "[]")
  },
  methods: {

    input() {
      if (this.value == "") {
        this.searchlist = ""
        return
      }
      this.getSearch()
    },
    keepvalue() {
      if (this.value) {
        this.datalist.push(this.value)
        localStorage.aaa = JSON.stringify(this.datalist)
        this.list = JSON.parse(localStorage.aaa)
      }
    },
    valueclick(index) {
      this.value = this.searchlist[index].name
    },
    deletedata(index) {
      console.log(index);
      this.list.splice(index, 1)
      localStorage.aaa = JSON.stringify(this.list)
    },
    //跳转
    aclick(index) {
      this.searchName = this.hotlist[index].searchWord;
      this.aaa = this.hotlist[index].score;
      this.$store.state.searchName = this.searchName
      this.$store.state.id = this.aaa

    },

    //获取数据
    async getSearch() {
      const res = await getSearch(this.value)
      console.log(res);
      this.searchlist = res.data.result.songs.slice(0, 8)

    },
    // async getCorrelation(index) {
    //   let aid = this.searchlist[index].id
    //   const res = await getCorrelation(aid)
    //   this.searchlist = res.data
    // },
    async getHotsearch(index) {
      const res = await getHotsearch()
      this.hotlist = res.data.data.slice(0, 10)
    },
    //搜索点击跳转
    location(index) {
      this.searchName = this.searchlist[index].name
      this.$store.state.searchName = this.searchName
      this.$router.push('/musiclist')
    }
  }
}
</script>
<style lang="less" scoped>
.van-button--info {
  color: black;
  background-color: white;
  margin: 10px 20px;
  border: 0.5px solid #e5e5e5;
  min-width: 60px;
}
h4 {
  color: #507daf;
}
.search {
  .van-card {
    height: 40px;
  }
}
.van-icon {
  padding-right: 30px;
}
.list {
  li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin: 2px;
    position: relative;
    .van-icon {
      padding-left: 20px;
    }
    span {
      font-size: 18px;
      position: absolute;
      right: 40px;
    }
  }
}
</style>